<!--
 * @Descripttion:
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: 1074699502@qq.com
 * @Contact: QQ:1074699502
 * @LastEditors: 梧桐
 * @LastEditTime: 2020-12-06 23:34:41
-->
<template>
	<view class="windowCard" @click="linkTo">
		<view class="windowHeader">
			<h1 class="title">{{$t(cardInfo.title)}}</h1>
			<view class="seckill-slot" v-if="type=='seckill'">
				<slot name="cutdown"></slot>
			</view>

			<view v-else-if="type=='live'" class="liveBroad">
				<liveAnimation :isShowBg="false" />{{$t('直播')}}
			</view>
			<view class="badge" v-else :style="{background:cardInfo.tag_bg_color}">
				{{$t(cardInfo.tag)}}
			</view>
		</view>
		<view v-show="cardInfo.slogan" class="slogan">{{$t(cardInfo.slogan)}}</view>
		<view class="imgListWrap">
			<block v-for="(item,index) in cardInfo.list" :key="index">
				<view class="imgBox" style="width:50%">
					<u-image :src="item[thumbName]" class="goodsThumb" border-radius="8" mode="widthFix">
					</u-image>
					<view v-if="type=='seckill'" class="price">
						<text class="symbol">¥</text>{{parseFloat(item.price)}}
						<text class="seckillPrice">¥{{parseFloat(item.shop_price)}}</text>
					</view>
					<!-- <view class="liveCover" v-if="type=='live'">
						<image src="/static/images/icon-livePlay.png" class="play" />
					</view> -->
					<view v-if="type=='assemble'" class="assemble">
						¥{{item.price}}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'shopWindow',
		data() {
			return {

			}
		},
		props: {
			cardInfo: {
				type: Object,
				required: true,
				default: () => {}
			},
			type: {
				type: String,
				required: true,
				default: ''
			},
			thumbName: {
				type: String,
				default: 'thumb_url'
			}
		},
		methods: {
			linkTo() {
				let list = [{
					type: 'seckill',
					path: '/pagesC/goods/secKill?id=6'
				}, {
					type: 'live',
					path: '/pagesC/live/index'
				}, {
					type: 'assemble',
					path: '/pagesC/goods/assembleList?id=6'
				}, {
					type: 'new_goods',
					path: '/pagesC/goods/tagGoodsList?tag=new&id=4'
				}]
				list.forEach(res => {
					if (res.type == this.type) {
						this.getnav(res.path)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.windowCard {
		flex-basis: 300rpx;
		/*  #ifdef  MP-WEIXIN  */
		flex-basis: 280rpx;
		/*  #endif  */
		flex-grow: 2;
		padding: 20rpx 12rpx 20rpx 12rpx;
		line-height: 1.32;
		background-color: #fff;

		&:first-child {
			background-image: linear-gradient(180deg, #fceded, #fff 20%);

			.slogan {
				color: #ff4444;
			}
		}

		&:nth-child(2) {
			background-image: linear-gradient(180deg, #fceded, #fff 20%);

			.slogan {
				color: #ff4444;
			}
		}

		&:nth-child(3) {
			background-image: linear-gradient(180deg, #fceded, #fff 20%);

			.slogan {
				color: #ff703a;
			}

		}

		&:nth-child(4) {
			background-image: linear-gradient(180deg, #fceded, #fff 20%);

			.slogan {
				color: #ff5d7b;
			}
		}

		&:nth-child(even) {
			// margin-left: 12rpx;
		}

		.slogan {
			margin: 0;
			color: #ffa468;
			font-size: 24rpx;
		}

		.windowHeader {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.title {
				font-size: 32rpx;
				color: #444;
				margin-right: 8rpx;
			}
		}

		.seckill-slot {
			display: flex;
			justify-content: flex-start;
		}

		.badge {
			background-color: #ff4444;
			color: #fff;
			font-size: 10px;
			display: flex;
			align-items: center;
			height: 32rpx;
			border-radius: 6rpx;
			padding: 2rpx 8rpx;
			border-top-right-radius: 14rpx;
			border-bottom-left-radius: 14rpx;
		}

		.liveBroad {
			@extend .badge;

		}
		
		

		.imgListWrap {
			margin-top: 14rpx;
			display: flex;
			justify-content: space-between;

			.imgBox {
				text-align: center;
				height: 164rpx;
				overflow: hidden;
				position: relative;
				border-radius: 8rpx;

				.newGoods {
					position: absolute;
					bottom: -6rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #fff;
					font-size: 24rpx;
					background-image: linear-gradient(to right, #ffa468, #fa3f3f);
					padding: 4rpx 6rpx;
					opacity: 0.7;
					border-radius: 40rpx;
				}

				.assemble {
					font-size: 10px;
					color: #fff;
					background-image: linear-gradient(to right, #ffa468, #ff5d7b);
					border-radius: 2rpx;
					border-top-right-radius: 8rpx;
					border-bottom-left-radius: 8rpx;
				}

				.liveCover {
					position: absolute;
					left: 0;
					bottom: 0;
					right: 0;
					top: 0;
					border-radius: 8rpx;
					animation: showCover 8s ease-in-out 1s infinite;

					.play {
						animation: flip 12s ease-in-out 1s infinite;
						width: 40rpx;
						height: 40rpx;
						margin-top: 60rpx;
					}
				}

				&:not(:last-child) {
					margin-right: 8rpx;
				}

				.goodsThumb {
					width: 100%;
					height: 160rpx;
					overflow: hidden;
					border-radius: 8rpx;
				}

				.price {
					width: 100%;
					color: #fe4444;
					font-weight: 500;
					font-size: 26rpx;
					margin-top: -6rpx;
					position: absolute;
					bottom: 0rpx;
					text-align: center;

					.symbol {
						font-size: 20rpx;
					}
				}

				.seckillPrice {
					color: #999;
					text-decoration: line-through;
					font-size: 20rpx;
				}
			}
		}
	}

	@keyframes showCover {
		0% {
			background-color: rgba(0, 0, 0, 0);
		}

		50% {
			background-color: rgba(0, 0, 0, 0.3);
		}

		100% {
			background-color: rgba(0, 0, 0, 0);
		}
	}

	@keyframes flip {
		0% {
			transform: rotateY(0) scale(0.9);
		}

		50% {
			transform: rotateY(360deg) scale(1.1);
		}

		100% {
			transform: rotateY(0) scale(0.9);
		}
	}
</style>
